<template>
  <div class="project-list">
    <div class="search-bar">
      <a-row :gutter="16">
        <a-col :span="6">
          <a-input-search
            v-model:value="searchKeyword"
            placeholder="请输入关键词搜索"
            @search="onSearch"
          />
        </a-col>
        <a-col :span="6">
          <a-select
            v-model:value="projectType"
            style="width: 100%"
            placeholder="项目类型"
          >
            <a-select-option value="市政工程">市政工程</a-select-option>
            <a-select-option value="建筑工程">建筑工程</a-select-option>
            <a-select-option value="道路工程">道路工程</a-select-option>
          </a-select>
        </a-col>
        <a-col :span="6">
          <a-button type="primary" @click="onSearch">筛选</a-button>
        </a-col>
      </a-row>
    </div>

    <a-table
      :columns="columns"
      :data-source="projectList"
      :pagination="pagination"
      @change="handleTableChange"
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'action'">
          <a-space>
            <a @click="viewProject(record)">查看</a>
            <a @click="editProject(record)">编辑</a>
          </a-space>
        </template>
      </template>
    </a-table>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';

interface Project {
  key: string;
  name: string;
  type: string;
  template: string;
  date: string;
}

interface TablePagination {
  total: number;
  current: number;
  pageSize: number;
}

const searchKeyword = ref('');
const projectType = ref('');

const columns = [
  {
    title: '项目名称',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: '项目类型',
    dataIndex: 'type',
    key: 'type',
  },
  {
    title: '适应模板',
    dataIndex: 'template',
    key: 'template',
  },
  {
    title: '创建日期',
    dataIndex: 'date',
    key: 'date',
  },
  {
    title: '操作',
    key: 'action',
  },
];

const projectList = ref([
  {
    key: '1',
    name: '北京污水管理',
    type: '市政工程',
    template: '3个',
    date: '2025年2月10日',
  },
  // 更多示例数据...
]);

const pagination = ref({
  total: 100,
  current: 1,
  pageSize: 10,
});

const onSearch = () => {
  // 实现搜索逻辑
  console.log('搜索关键词:', searchKeyword.value);
  console.log('项目类型:', projectType.value);
};

const handleTableChange = (pag: any) => {
  pagination.value = pag;
  // 实现分页逻辑
};

const viewProject = (record: any) => {
  console.log('查看项目:', record);
};

const editProject = (record: any) => {
  console.log('编辑项目:', record);
};

onMounted(() => {
  // 初始化加载数据
});
</script>

<style scoped>
.project-list {
  padding: 24px;
}

.search-bar {
  margin-bottom: 24px;
}
</style>